<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      header-row-class-name="table-header"
      class="doumee-element-table doumee-element-tabled"
    >
      <el-table-column
        align="center"
        label="卡号"
        prop="number"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="会员卡类型"
        prop="cardTypeName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="客户姓名"
        prop="memberName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="客户手机号"
        prop="phone"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="可用余额"
        prop="money"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="有效期"
        min-width="185"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.startDay + "~" + scope.row.endDay }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="固定订场明细"
        prop="info"
        min-width="300"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作员"
        min-width="120"
        show-overflow-tooltip
        prop="editorName"
      />
      <el-table-column
        align="center"
        label="创建时间"
        min-width="160"
        prop="createTime"
        show-overflow-tooltip
      />
      <el-table-column
        label="付款状态"
        prop="fullPay"
        min-width="100"
        align="center"
        fixed="right"
      ><template slot-scope="scope">
        {{ scope.row.fullPay == '1' ? "一次付清" : "分次付款" }}
      </template>
      </el-table-column>
      <el-table-column
        label="自动扣款"
        prop="sort"
        min-width="100"
        align="center"
        fixed="right"
      ><template slot-scope="scope">
        {{ scope.row.payStatue == 1 ? "是" : "否" }}
      </template>
      </el-table-column>
      <el-table-column
        label="状态"
        prop="sort"
        min-width="100"
        align="center"
        fixed="right"
      ><template slot-scope="scope">
        {{ scope.row.status == '1' ? "有效" : "失效" }}
      </template>
      </el-table-column>
      <el-table-column label="操作" min-width="140" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <!-- <el-button v-if="meta.indexOf('SiteFixedReserveDelay') > -1" v-preventReClick type="text" @click="delayShow(scope.row)">续租
            </el-button> -->
            <el-button v-if="meta.indexOf('UpdateSiteFixedReserve') > -1 && scope.row.status == '1'" v-preventReClick type="text" @click="editBtn(scope.row)">修改
            </el-button>
            <el-button v-if="meta.indexOf('SiteFixedReserveDele') > -1 && scope.row.status == '1'" v-preventReClick type="text" @click="closeBtn(scope.row)">关闭
            </el-button>
            <el-button
              v-if="meta.indexOf('SiteFixedReserveDele') > -1 && scope.row.status != '1'"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="deletelBtn(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-dialog title="续租" :visible.sync="showDelay" :width="width" top="25vh !important" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="结束日期" prop="date">
          <el-date-picker
            v-model="form.date"
            :picker-options="pickerStart"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          /> </el-form-item>
      </el-form>
      <div v-if="pdgd" class="secondColor">付全款固定预定，续租不支持扣款</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDelay">取消</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="clickDelay('ruleForm')"
        >确认续租</el-button>
      </div>
    </el-dialog>
    <gdyd v-if="isShowgdyd" ref="gdyd" @gdydSuccess="getList()" @close="isShowgdyd = false" />
  </div>
</template>

<script>
import { siteFixedList, delaySiteFixedReserve, deleteSiteFixedReserve, getSiteFixedReserveInfo } from '@/api'
import store from '@/store'
import { parseTime } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
import gdyd from '../areaReserve/components/gdyd.vue' // 固定预定
export default {
  name: 'DefaultReserveList',
  components: {
    QueryForm,
    gdyd
  },
  data() {
    return {
      isShowgdyd: false,
      queryFormConfig: {
        formItems: [{
          filed: 'memberName',
          type: 'input',
          label: '姓名',
          placeholder: '请输入预定人姓名',
          clearable: true
        }, {
          filed: 'memberPhone',
          type: 'input',
          label: '手机号',
          placeholder: '请输入预定人手机号',
          clearable: true
        }, {
          filed: 'payStatue',
          type: 'select',
          label: '是否自动付款',
          placeholder: '请选择是否自动付款',
          clearable: true,
          options: [
            { value: '0', label: '否' },
            { value: '1', label: '是' }
          ]
        }, {
          filed: 'status',
          type: 'select',
          label: '订单状态',
          placeholder: '请选择订单状态',
          clearable: true,
          options: [
            { value: '0', label: '失效' },
            { value: '1', label: '有效' }
          ]
        }],
        online: true
      },
      pickerStart: {
        disabledDate: (time) => {
          return this.pickDateStart(time)
        }
      },
      totalCount: 0,
      modalDialog: store.getters.dialog,
      testStr: '',
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: true,
      showDelay: false,
      form: {},
      width: '400px',
      maxEndDay: '',
      id: '',
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      pdgd: false
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    editBtn(row) {
      const obj = {
        ...row,
        date: [row.startDay, row.endDay],
        ydcc: '1'
      }
      const objTemp = JSON.parse(JSON.stringify(obj))
      this.isShowgdyd = true
      this.$nextTick(() => {
        this.$refs.gdyd.showBtn(row.projectId, objTemp)
      })
    },
    pickDateStart(time) {
      if (this.maxEndDay) {
        return new Date(new Date(time).toLocaleDateString()).getTime() >= new Date(new Date(this.maxEndDay).toLocaleDateString()).getTime()
      }
      return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
    },
    clearList() {
      this.filters = {}
      this.getList(1)
      // this.testStr = 1
      // console.log(this.$refs.title.value, this.testStr);
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      siteFixedList({ pagination, param: { venueId, ...filters }}).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    delayShow(cnt) {
      if (cnt.fullPay === '1') {
        // this.$message('付全款固定预定，续租不支持扣款')
        // return false
        this.pdgd = true
      } else {
        this.pdgd = false
      }
      getSiteFixedReserveInfo({ param: { fixedId: cnt.id }}).then(res => {
        if (res.errorCode === '000000') {
          this.maxEndDay = res.record.maxEndDay
          this.showDelay = true
          this.id = cnt.id
          this.form = {}
        }
      })
    },
    cancelDelay() {
      this.showDelay = false
    },
    clickDelay(formName) {
      const { form, id } = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          delaySiteFixedReserve({ param: { endDay: form.date, fixedId: id }}).then(res => {
            if (res.errorCode === '000000') {
              this.$message.success('续租成功')
              this.showDelay = false
              this.getList()
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    closeBtn(e) {
      const that = this
      this.$confirm('此操作将关闭该固定预定, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          deleteSiteFixedReserve({ param: { fixedId: e.id, type: '0' }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('关闭成功')
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    deletelBtn(e) {
      const that = this
      this.$confirm('此操作将删除该固定预定, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          deleteSiteFixedReserve({ param: { fixedId: e.id, type: '1' }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('删除成功')
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    }
  }
}
</script>
